<template>
	<view>
		<view class="picker-mask" @click="closePicker" catchtouchmove="true" v-show="isShow"></view>
		<view class="picker-content" :class="{'pickerShow':isShow}">
			<view class="picker-button">
				<text @click="closePicker">取消</text>
				<text @click="confirm">确定</text>
			</view>
			<!-- 三列选择-联动 -->
			<picker-view class="picker-view" indicator-class="picker-view-selected-three" :value="indx" @change="pickerViewChangeThree">
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in province" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in city" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in district" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	import app from '@/common/index.js'
	export default {
		name: "city-select",
		props: ['isShow', 'areaData'],
		data() {
			return {
				indx: [0, 0, 0], // 三列索引
				province: [],
				city: [],
				district: [],
				areaInfo: [],
			};
		},
		onLoad() {},
		// 监测props传过来的areaData数据
		watch: {
			areaData(val) {
				this.areaData = val;
				this.pickerViewChangeThree()
				this.getProvince();
			}
		},
		methods: {
			/**
			 * @des 获取省
			 */
			getProvince() {
				this.province = this.areaData[0];
				this.getCity(this.indx[0]);
			},
			/**
			 * @des 获取市
			 */
			getCity(i) {
				let ad = this.areaData, prov = ad[0][i], tmpCity = [];
				ad[1].forEach((item, index) => {
					if(item.pid === prov.id) {
						tmpCity.push(item);
					}
				});
				this.city = tmpCity;
				this.getArea(this.indx[1], tmpCity);
			},
			/**
			 * @des 获取区
			 */
			getArea(i, tmpCity) {
				let ad = this.areaData, city = tmpCity[i], tmpDistrict = [];
				for(let item of ad[2]) {
					if(item.pid === city.id) {
						tmpDistrict.push(item);
					}
				}
				this.district = tmpDistrict;
			},
			// 三列联动选项变化
			pickerViewChangeThree(e) {
				let changeValue = e ? e.detail.value : [0,0,0];
				this.indx = changeValue;
				this.getProvince();
				let p = this.province[changeValue[0]], c = this.city[changeValue[1]], d = this.district[changeValue[2]];
				let a = [p,c,d];
				console.log(a)
				this.areaInfo = a;
			},
			// 确定事件-返回选中项的数组索引
			confirm() {
				this.$emit("onConfirm", this.areaInfo);
			},
			// 隐藏组件
			closePicker() {
				this.$emit("onCancle");
			}
		}
	}
</script>

<style>
	.picker-mask {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.picker-content {
		flex-direction: column;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 600upx;
		background-color: #FFFFFF;
		transform: translateY(100%);
		transition: all 200ms ease;
	}

	.pickerShow {
		transform: translateY(0) !important;
	}

	.picker-content .picker-button {
		display: flex;
		justify-content: space-between;
		height: 80upx;
		line-height: 80upx;
		padding: 0 30upx;
	}

	.picker-button text {
		font-size: 28upx;
		font-weight: 500;
	}

	.picker-button text:first-child {
		color: #A1A1A1;
	}

	.picker-button text:last-child {
		color: #82d7d0;
	}

	.picker-content .picker-view {
		width: 100%;
		height: 500upx;
	}

	.picker-content .picker-view-selected-three {
		height: 80upx;
		line-height: 80upx;
		border-top: 1upx solid #82d7d0;
		border-bottom: 1upx solid #82d7d0;
	}
	.picker-content .picker-view-selected-three {
		position: relative;
		left: 5%;
		width: 90%;
	}

	.picker-view .picker-item {
		display: block;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		/* font-size: 28upx; */
		font-weight: bold;
		text-align: center;
	}
</style>
